<template>
  <div style="overflow:auto;height:560px;margin:10px 0 0 20px">
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称" style="width:50%">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" style="width:50%">
          <el-select v-model="form.classify" placeholder="请选择商品类型---">
            <el-option label="主粮" value="主粮"></el-option>
            <el-option label="零食" value="零食"></el-option>
            <el-option label="玩具" value="玩具"></el-option>
            <el-option label="日用药品" value="日用药品"></el-option>
            <el-option label="洗护用品" value="洗护用品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用宠物" style="width:50%">
          <el-select v-model="form.pet" placeholder="请选择宠物类型---">
            <el-option label="通用" value="通用"></el-option>
            <el-option label="狗" value="狗"></el-option>
            <el-option label="猫" value="猫"></el-option>
            <el-option label="鸟" value="鸟"></el-option>
            <el-option label="水禽" value="水禽"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" style="width:50%">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" style="width:50%">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
        <el-form-item label="生产日期" style="width:50%">
          <el-input v-model="form.production"></el-input>
        </el-form-item>
        <el-form-item label="保质期" style="width:50%">
          <el-input v-model="form.shelfLife"></el-input>
        </el-form-item>
        <el-form-item label="商品产地" style="width:50%">
          <el-input v-model="form.producer"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" style="width:50%">
          <!-- <el-upload
              class="avatar-uploader"
              :action="$http.defaults.baseURL + '/upload'"  
              :show-file-list="false"
              :on-success="afterUpload">
              <img v-if="model.icon" :src="model.icon" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>  -->
          <input type="file" id="addImage" >
          <img style="width:100px" id="imageUrl" />
       

        </el-form-item>
        <el-form-item label="商品描述" style="width:50%">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addBtn">新增</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        name: "", // 名称
        classify: "", // 商品种类
        pet: "", // 适⽤用宠物（
        price: "", // 价格
        weight: "", // 重量量
        production: "", // ⽣生产⽇日期
        shelfLife: "", // 保质期
        producer: "", // 产地
        images: "", // 商品图⽚片（列列表图/详情图...）
        desc: "" // 商品描述
      },
      dialogImageUrl: "", //上传图片
      dialogVisible: false,
      form: {
          name: '',
          age: ''
        }
    };
  },
  methods: {
    addBtn() {
	    //图片地址
      // let urls = "";
      //   $("#addImage").fileupload({
      //       url: "/assets/goods",
      //       done(e, { result }) {
      //           $("#imageUrl").prop("src", "." + result.data.url);
      //           urls = result.data.url;
      //           console.log("图片地址",urls);         
      //       }
      // });
     
      //新增商品
      axios
        .post("/goods/addGoods", {
          name: this.form.name,
          classify: this.form.classify,
          pet: this.form.pet,
          weight: this.form.weight,
          price: this.form.price,
          production: this.form.production,
          shelfLife: this.form.shelfLife,
          producer: this.form.producer,
          desc: this.form.desc,
          images: "",
        })
        .then(res => {
          if (res) {
            alert("新增成功");
				this.form.name="",
				this.form.classify="",
				this.form.pet="",
				this.form.weight="",
				this.form.price="",
				this.form.production="",
				this.form.shelfLife="",
				this.form.producer="",
				this.form.desc="",
				this.form.images=""
          }
        });
	},
	}
    
};
</script>

<style>
el-form-item {
  width: 50%;
}
</style>
